<template>
	<view class="main">
		<!-- 用户头像 -->
		<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image style="height: 100%;width: 100%;" :src="avatarUrl | avatarfilter"></image>
		</button>
		<!-- 用户昵称 -->
		
		
		
	<form @submit="submit" >
		<input type="nickname" name="nickname" v-model="nickname"  class="username" placeholder="请输入昵称"/>
		<button class="getPhone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		<input type="text" v-model="phone" placeholder="请输入手机号" />
		</button>
		
		<button class="login-btn" form-type="submit"  >提交</button>
	</form>
		<!-- <view class="login-btn" >
		绑定手机号
		</view> -->
		
		
		
		
		</view>
	</view>
</template>

<script>
	import { getPhonenumber,wxRegister,getUserMessage } from "@/api/feixiang/application.js"
	import {imageUrl} from '@/config.js'
	export default {
		data() {
			return {
				phone:'',
				role: '',
				avatarUrl:'',
				nickname:'',
			}
		},
		onLoad() {
			this._getUserMessage()
		},
		methods: {
			async _getUserMessage() {
				const res = await getUserMessage()
				console.log(res.data.headimage);
				if(res.data.headimage){
					this.avatarUrl = res.data.headimage
				} else {
					this.avatarUrl = imageUrl + '/profile/avatar/2022/11/19/e7MMHQucVQFg657700a96022645bd964aa0b33d76e23_20221119094612A008.png'
				}
				this.phone = res.data.phone
				this.nickname = res.data.nickName
			},
		async	submit(e) {
				console.log(e);
				this.nickname = e.detail.value.nickname
				const res = await wxRegister({
					phone:this.phone,
					nickName:this.nickname,
					headimage:this.avatarUrl,
				})
				uni.navigateBack()
			},
		async	getPhoneNumber(e) {
				console.log(e)
				const code = e.detail.code
				const res = await getPhonenumber({
					code,
				})
				this.phone = res.data.phoneNumber
			},
			onChooseAvatar(e) {
				console.log(e.detail);
				this.avatarUrl = e.detail.avatarUrl
				uni.uploadFile({
							url: 'https://applet.youtuyiliao.com/upload/public/uploadImage', //仅为示例，非真实的接口地址
							filePath: this.avatarUrl,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data);
								this.avatarUrl = imageUrl + JSON.parse(uploadFileRes.data).data
							}
						});
			  },
		wxGetUserInfo() {
		
		},
			
		}
	}
</script>

<style scoped>
	.login-btn {
		position: fixed;
		top: 450rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 300rpx;
		height: 80rpx;
		border-radius: 80rpx;
		background-color: #00bcb2;
		color: #fff;
		font-size: 40rpx;
		line-height: 80rpx;
		text-align: center;
		
	}
	.main {
		padding-top: 58rpx;
	}
	.avatar {
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		border-radius: 50%;
		overflow: hidden;
		padding: 0;
	}
		
	.getPhone {
		background-color: transparent;
		font-size: 32rpx;
	}
	.username {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		margin-top: 28rpx;
		margin-bottom: 20rpx;
		
		
	}
	.ipt {
		padding: 0 32rpx;
	}
	.phone-ipt {
		border-bottom: 2rpx solid #F7F7F7;
		position: relative;
	}
	.phone-ipt-text {
		position: absolute;
		bottom: 10rpx;
		left: 0;
		font-size: 32rpx;
	}
	.role-ipt {
		border-bottom: 2rpx solid #F7F7F7;
		position: relative;
	}
	.role-ipt-text {
		position: absolute;
		bottom: 10rpx;
		left: 0;
		font-size: 32rpx;
	}
</style>
